<template>
  <div class="app-container">


    <el-container>
      <el-header style="text-align:center">
        <span><h2> {{ list[index].name }} </h2></span>
      </el-header>
      <el-main style="text-align:center">
        <span @click="changeStepIndex(step_index)" class="step" style="margin-right: 20px;border:5px solid ;padding: 30px;display: inline-block;" v-for="(step, step_index) in list[index].steps">
          {{ step.name }}
        </span>
        <div style="text-align:center;width: 500px;">
          <span><h3>步骤详情</h3></span>
          <el-table
            v-loading="step_list_loading"
            :data="step_list"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row>


            <el-table-column label="名字">
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column label="PlayBook地址" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.playbook }}</span>
              </template>
            </el-table-column>

            <el-table-column label="权限" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.right }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
      <el-footer style="text-align:right">
      </el-footer>
    </el-container>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row>
      <el-table-column align="center" label="ID">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="名字">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="步骤数量" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.steps.length }}</span>
        </template>
      </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      >
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button @click="paramedit(scope.row)" type="text" size="small">任务参数配置</el-button>

      </template>
    </el-table-column>

    </el-table>


  <el-dialog title="Tale 参数设置" :visible.sync="outerVisible">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="调度器">
        <el-select v-model="form.scheduler" placeholder="请选择调度器" @change="changeSelect">
          <el-option v-for="i in schedulers"  :label="i" :value="i"></el-option>
        </el-select>
        <span>{{ scheduler_msg }}</span>
      </el-form-item>
  <el-form-item label="数据集" v-show="current_config=='安装'">
    <el-select v-model="form.database" placeholder="数据集">
      <el-option v-for="i in databases" :label="i" :value="i"></el-option>
    </el-select>

  </el-form-item>

    <el-form-item label="版本" v-show="current_config=='安装'">
      <el-select v-model="form.version" placeholder="请选择部署主机">
        <el-option v-for="i in versions"  :label="i" :value="i"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="备份地址" v-show="current_config=='备份'">
       <el-input v-model="form.backupdelta" label="描述文字"></el-input>
    </el-form-item>
  <el-form-item>
    <el-button class="primary" @click="submit">运行</el-button>
    <el-button @click="outerVisible=false">取消</el-button>
  </el-form-item>
</el-form>
  </el-dialog>

  </div>
</template>

<script>
import { getList } from '@/api/table'
import { getTemplate } from '@/api/template'
import { getConfig } from '@/api/config'
import { runTask } from '@/api/task'


export default {
  watch: {
    step_index: function(val){
      this.step_list = [this.list[this.index]['steps'][val],]
    },
    hosts: function(val){
      this.scheduler_msg = this.hosts[form.scheduler]
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      step_list: [],
      outerVisible: false,
      step_list_loading: false,
      list: null,
      listLoading: true,
      schedulers: [],
      index: 0,
      step_index: 0,
      hosts: null,
      scheduler_msg: "",
      host_msg: "",
      databases: [],
      versions: [],
      current_config: '',
      form: {
          host: '',
          scheduler: '',
          database: '',
          version: '',
          backupdelta: '',
        }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getTemplate().then(response => {
        this.list = response.templates
        this.listLoading = false
      })
    },
    handleClick(row) {
      for(let i = 0 ; i < this.list.length ; i++) {
        if ( this.list[i].name == row.name) {
          this.index = i
          this.step_index = 0
          break
        }
      }
    },
    changeSelect(i){
      this.scheduler_msg = this.hosts[i]
    },
    changeStepIndex(i) {
      this.step_index = i
    },
    paramedit(row){
      this.current_config = row.name
      this.outerVisible = true
      getConfig({"name": "tale.scheduler"}).then(response =>{
        this.schedulers = response.names
        this.hosts = response.result        
      })
      getConfig({"name": "tale.database"}).then(response=>{
        this.databases = response.result
      })
      getConfig({"name": "tale.version"}).then(response=>{
        this.versions = response.result
      })
      getConfig({"name": "tale.backupdelta"}).then(response=>{
        this.form.backupdelta = response.result
      })
    },
    submit() {
      runTask({"name": this.current_config, "form": this.form}).then(response=>{
        this.$router.push('/task')
      })
    }
  }
}
</script>
